```svelte
<script lang="ts">
  import * as menu from "@zag-js/menu"
  import { portal, normalizeProps, useMachine } from "@zag-js/svelte"
  import { onMount } from "svelte"

  const id = $props.id()

  // Level 1 - File Menu
  const fileService = useMachine(menu.machine, ({ id: `${id}-1`, "aria-label": "File" }))

  const fileMenu = $derived(menu.connect(fileService, normalizeProps))

  // Level 2 - Share Menu
  const shareService = useMachine(menu.machine, ({ id: `${id}-2`, "aria-label": "Share" }))

  const shareMenu = $derived(menu.connect(shareService, normalizeProps))

  onMount(() => {
    fileMenu.setChild(shareService)
    shareMenu.setParent(fileService)
  })

  // Share menu trigger
  const shareMenuTriggerProps = $derived(fileMenu.getTriggerItemProps(shareMenu))
</script>

<button {...fileMenu.getTriggerProps()}>Click me</button>

<div use:portal {...fileMenu.getPositionerProps()}>
  <ul {...fileMenu.getContentProps()}>
    <li {...fileMenu.getItemProps({ value: "new-tab" })}>New tab</li>
    <li {...fileMenu.getItemProps({ value: "new-win" })}>New window</li>
    <li {...shareMenuTriggerProps}>Share</li>
    <li {...fileMenu.getItemProps({ value: "print" })}>Print...</li>
    <li {...fileMenu.getItemProps({ value: "help" })}>Help</li>
  </ul>
</div>

<div use:portal {...shareMenu.getPositionerProps()}>
  <ul {...shareMenu.getContentProps()}>
    <li {...shareMenu.getItemProps({ value: "messages" })}>Messages</li>
    <li {...shareMenu.getItemProps({ value: "airdrop" })}>Airdrop</li>
    <li {...shareMenu.getItemProps({ value: "whatsapp" })}>WhatsApp</li>
  </ul>
</div>
```
